<template>
    <div class="photoPrivacy">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'publicAlbum' }">
                    <span class="back"></span>
            </router-link>
            <span>{{language.photoPrivacy_title}}</span>
            </span>
        </div>
        <div class="body">
            <div class="title">{{language.photoPrivacy_goldTip}} <span class="ico_gold"></span></div>
            <dl class="settingBox">
                <dd>
                    <label>{{language.photoPrivacy_hideItemA}}</label>
                    <div class="switchBox" @click="tabOnOff('sugarBaby',1)">
                        <OnOff :propsStatus="sugarBaby"></OnOff>
                    </div>
                </dd>
                <dd>
                    <label>{{language.photoPrivacy_hideItemB}}</label>
                    <div class="switchBox" @click="tabOnOff('sugerDaddy',2)">
                        <OnOff :propsStatus="sugerDaddy"></OnOff>
                    </div>
                </dd>
                <dd>
                    <label>{{language.photoPrivacy_hideItemC}}</label>
                    <div class="switchBox" @click="tabOnOff('allExceptFavorties')">
                        <OnOff :propsStatus="allExceptFavorties"></OnOff>
                    </div>
                </dd>
            </dl>
        </div>
        <loading :props="{type:'page', show:loading}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api'
import OnOff from './OnOff'
import storeDataPartMixin from '../common/storeDataPartMixin'
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'photoPrivacy',

    components: {
        OnOff,
        loading,
        publicDialog
    },

    mixins: [storeDataPartMixin],

    data: function() {
        return {
            loading: false,
            dialogData: {},
        }
    },

    activated: function() {
        this.dialogData = {};
    },

    computed: {

        userInfo() {
            return this.$store.state.user.userInfo;
        },

        photo_hide_to_gender() {
            return this.$store.state.user.userInfo.privacy_setting.photo_hide_to_gender;
        },

        allExceptFavorties() {
            return this.$store.state.user.userInfo.privacy_setting.photo_only_show_to_favorite;
        },

        sugarBaby() {
            let select = Unit.getObjLocalStorage('ms_gender'),
                arr = this.getMultipleSelectArr(this.photo_hide_to_gender, select);
            return _.indexOf(arr, '1') > -1 ? 1 : 0;
        },

        sugerDaddy() {
            let select = Unit.getObjLocalStorage('ms_gender'),
                arr = this.getMultipleSelectArr(this.photo_hide_to_gender, select);
            return _.indexOf(arr, '2') > -1 ? 1 : 0;
        },

    },

    methods: {

        tabOnOff: function(type, val) {
            this.updataStatus(type, val);
        },

        getApiObj: function(type, val) {
            let data;
            if (type == 'sugarBaby' || type == 'sugerDaddy') {
                data = this[type] ? {
                    'open_photo_gender': val
                } : {
                    'hide_photo_gender': val
                };
            } else if (type == 'allExceptFavorties') {
                data = {
                    'photo_only_favorite': this.allExceptFavorties ? '' : 1
                };
            }
            return data;
        },

        updataStatus: function(type, val) {
            let tthis = this,
                obj = {};
            if (parseInt(tthis.userInfo.status.isGuest) == 1) {
                tthis.dialogData = {
                    position: 'middle',
                    type: 'upgrade',
                    content: {
                        info: tthis.language.photoPrivacy_upgradeTip,
                    }
                };
                return false;
            }
            obj.type = type;
            obj.data = this.getApiObj(type, val);
            obj.callback = function(response) {
                if (typeof(response.errmsg) != 'undefined') {
                    tthis.dialogData = {
                        position: 'top',
                        type: 'error',
                        content: {
                            info: response.errmsg,
                        }
                    };
                }
            };
            tthis.loading = true;
            obj.complete = function() {
                tthis.loading = false;
            };
            this.$store.dispatch('user_changePhotoStatus', obj);
        }
    }
}

</script>
<style scoped>
.photoPrivacy {
    padding-top: 44px;
    background-color: #f5f7f8;
}

.photoPrivacy .body {}

.photoPrivacy .title {
    padding: 0 14px;
    padding-top: 10px;
    font-size: 14px;
    border: 0;
    height: 40px;
    line-height: 40px;
    color: #666;
}

.photoPrivacy .ico_gold {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 18px;
    padding: 2px 0 2px 18px;
    margin-left: 5px;
}

.photoPrivacy .settingBox {
    margin-top: 4px;
    padding: 0 14px;
    background-color: #fff;
}

.photoPrivacy .settingBox dd {
    padding: 15px 0;
    position: relative;
    line-height: 22px;
    min-height: 22px;
    font-size: 14px;
    color: #999999;
    border-bottom: 1px dashed #dcdfe3;
}

.photoPrivacy .settingBox dd:last-child {
    border-bottom: 0;
}

.photoPrivacy .settingBox dd label {
    margin: 0 60px 0 0;
}

.photoPrivacy .settingBox dd .switchBox {
    height: 30px;
    position: absolute;
    right: 0;
    top: 10px;
}

</style>
